var $province=$('#province');
var $municipality=$('#municipality');
var $country=$('#country');
var $plate=$('#plate');
var $domainCtrl=$("#domainCtrl");
/**
 * 向后台发送请求，根据返回数据渲染省级列表数据内容
 */
renderPage();
window.globalHost="";
function renderPage () {
    $.post(window.globalHost + '/agent-sys/admin/zoneInfo/index.do',{}).success(function(data) {
        var record = common.transformData(data);
        var nationId=record[0]['id'];
        var lv1Data=record[0]['subZone'];
        lv1Render($province,lv1Data,nationId);
    });
}
/**
 * 省级部分渲染
 */
function lv1Render(selector,obj,nationId) {
    // 渲染显示数据，查
    renderDomainList(selector,obj,"addprovince",$municipality,lv2Render);
    // 更改区域信息可用状态，删除/恢复
    changeStatus(selector,obj);
    // 更新区域信息名称，改
    updateZoneName(selector,obj);
    //点击添加，弹出文本框，输入内容添加省级区域信息, 增
    $("#addprovince").off("click").on("click",function () {
        addZoneName(nationId,$(this),obj);
    });
}
/**
 * 市级部分渲染
 */
function lv2Render(selector,obj) {
    // 渲染显示数据，查
    renderDomainList(selector,obj,"addMunicipality",$country,lv3Render);
    // 更改区域信息可用状态，删除/恢复
    changeStatus(selector,obj);
    // 更新区域信息名称，改
    updateZoneName(selector,obj);
    //点击添加，弹出文本框，输入内容添加市级区域信息, 增
    $("#addMunicipality").off("click").on("click",function () {
        var upZoneDom=$province.find('.selected');
        var upZoneId=upZoneDom.attr("data-id");
        addZoneName(upZoneId,$(this),obj);
    });
}
/**
 * 县级部分渲染
 */
function lv3Render(selector,obj) {
    // 渲染显示数据，查
    renderDomainList(selector,obj,"addCountry",$plate,lv4Render);
    // 更改区域信息可用状态，删除/恢复
    changeStatus(selector,obj);
    // 更新区域信息名称，改
    updateZoneName(selector,obj);
    //点击添加，弹出文本框，输入内容添加县级区域信息, 增
    $("#addCountry").off("click").on("click",function () {
        var upZoneDom=$municipality.find('.selected');
        var upZoneId=upZoneDom.attr("data-id");
        addZoneName(upZoneId,$(this),obj);
    });
}
/**
 * 板块级部分渲染
 */
function lv4Render(selector,obj) {
    // 渲染显示数据，查
    renderDomainList(selector,obj,"addPlate",null);
    // 更改区域信息可用状态，删除/恢复
    changeStatus(selector,obj);
    // 更新区域信息名称，改
    updateZoneName(selector,obj);
    //点击添加，弹出文本框，输入内容添加板块级区域信息, 增
    $("#addPlate").off("click").on("click",function () {
        var upZoneDom=$country.find('.selected');
        var upZoneId=upZoneDom.attr("data-id");
        addZoneName(upZoneId,$(this),obj);
    });
}
/**
 * 点击添加按钮，弹窗询问是否要添加新的区域名称，该方法需要传入两个参数
 * @param1  {[type]} upZoneId  [description] String类型 上级区域的id值
 * @param2  {[type]} selector [description] jQuery对象 本级区域的添加按钮
 */
function addZoneName(upZoneId,selector,obj) {
    var sendData={};
    var dialogDom="<div class='dialogPageCenter'><input type='text' id='addZoneName' style='width:100%;' placeholder='请输入...'></div>";
    common.openTempDialog({
        title:"添加区域信息",
        content:dialogDom,
        ajaxUrl:window.globalHost + '/agent-sys/admin/zoneInfo/save.do',
        sendData:sendData,
        FailedMsg:"请输入板块名称",
        beforeSend:function (layerDocument) {
            //组装数据，添加区域信息需要向后台接口传入的数据字段格式。
            //upZoneId为当前添加区域的上一级区域id，通过参数获取，如果要添加省传入国家id，为固定值
            //zoneName为当前要添加的区域名称
            sendData.upZoneId=upZoneId;
            sendData.zoneName=layerDocument.find("#addZoneName").val();
            //返回发送数据的前提条件，如果条件不匹配不执行ajax，并给予FailedMsg信息提示
            return !!sendData.upZoneId && !!sendData.zoneName;
        },
        resOk:function (layerDocument,record) {
            //如果更新成功，当前列表内新增添加的区域，并重刷列表内容
            selector.before('<li data-id='+record.res.id+'><span class="zoneName">'+layerDocument.find("#addZoneName").val()+'</span><a class="status available pull-right">可用</a></li>');
            var newObj={
                id:record.res.id,
                level: "2",
                status: "AVAILABLE",
                subZone: [],
                zoneName: layerDocument.find("#addZoneName").val()
            };
            obj.push(newObj);
            // renderPage();
        }
    });
}
/**
 * 双击区域信息名，弹窗询问是否要更新该区域名称
 * @param  {[type]} selector  [description] jQuery对象 当前点击的 区域名称
 */
function updateZoneName(selector,obj) {
    //运用事件委托的方法，获取区域信息名称并注册点击事件
    selector.off("dblclick").on("dblclick",".zoneName",function () {
        var dialogDom="<div class='dialogPageCenter'><input type='text' id='updateZoneName' style='width:100%;' placeholder='请输入新名称...'></div>";
        var sendData={};
        var $this=$(this);
        var selfId=$this.parent().attr("data-id");
        var selfDataIndex=$this.parent().index();
        common.openTempDialog({
            title:"更新区域板块名称",
            content:dialogDom,
            ajaxUrl:window.globalHost + '/agent-sys/admin/zoneInfo/update.do',
            sendData:sendData,
            FailedMsg:"请输入板块名称",
            contentOnLoad:function (layerDocument) {
                //初始化文本框内容。使文本框内容和区域名称一致
                layerDocument.find("#updateZoneName").val($this.html());
            },
            beforeSend:function (layerDocument) {
                //组装数据，更新当前区域名称需要向后台接口传入的数据字段格式。
                //id为目标区域id
                //zoneName为目标区域需要更改的名称
                sendData.id=selfId;
                sendData.zoneName=layerDocument.find("#updateZoneName").val();
                //返回发送数据的前提条件，如果条件不匹配不执行ajax，并给予FailedMsg信息提示
                return !!sendData.id && !!sendData.zoneName;
            },
            resOk:function (layerDocument) {
                //如果更新成功，当前目标区域的名称发生变化，并重刷列表内容
                $this.html(layerDocument.find("#updateZoneName").val());
                obj[selfDataIndex]['zoneName']=layerDocument.find("#updateZoneName").val();
                // renderPage();
            }
        });
    });
}
/**
 * 弹窗询问是否更改区域的使用状态、
 * @param  {[type]} selector  [description] jQuery对象 当前点击的 可用/禁用按钮
 */
function openChangeStatusDialog(selector,obj) {
    var isAllowed=selector.hasClass('available');
    var dialogDom=isAllowed?"<h4 class='dialogPageCenter text-center forbidden'>是否要禁用该区域</h4>":"<h4 class='dialogPageCenter text-center available'>是否要启用该区域</h4>";
    var ajaxUrl= window.globalHost + '/agent-sys/admin/zoneInfo/update.do';
    var sendData={};
    var selfId=selector.parent().attr("data-id");
    var selfDataIndex=selector.parent().index();
    var StatusResult="";
    var zoneNameVal=selector.prev().html();
    //判断当前状态是可用还是禁用，如果当前是可用，询问是否要禁用该区域；如果当前是禁用，询问是否要更改为可用
    //调用layer插件方法
    common.openTempDialog({
        title:"更新可用状态",
        content:dialogDom,
        ajaxUrl:ajaxUrl,
        sendData:sendData,
        beforeSend:function (layerDocument) {
            //组装数据，更新可用状态需要向后台接口传入的数据字段格式。
            //id为目标区域id
            //zoneName为目标区域名
            //status目标区域要改变的状态
            sendData.id=selfId;
            sendData.zoneName=zoneNameVal;
            StatusResult=sendData.status=isAllowed?"FORBID":"AVAILABLE";
            //返回判断发送的前置条件
            return !!sendData.id && !!sendData.status;
        },
        resOk:function (layerDocument,record) {
            //如果更新成功，当前目标区域的状态发生变化，并重刷列表内容
            isAllowed?selector.removeClass('available').addClass('forbidden').html("禁用"):selector.removeClass('forbidden').addClass('available').html("可用");
            // obj[selfDataIndex]['status']=StatusResult;
            renderPage();
        }
    });
}
/**
 * 控制更新当前区域的状态为"可用"或是"禁用"
 */
function changeStatus(selector,obj) {
    //使用事件委托的方式获取对象
    $domainCtrl.off('click').on('click','.status',function () {
        var $this=$(this);
        if($this.hasClass("status")){
            openChangeStatusDialog($this,obj);
        }
    });
}
/**
 * 根据数据内容渲染联动区域的列表，点击上级列表项，下级列表更新渲染
 * @param1  {选择器} selector1  [description] jQuery对象 本级渲染区域的ul
 * @param2  {JSON数据} obj [description] JSON数据对象
 * @param3  {string} addIdName [description] 各级区域点击按钮的id值
 * @param4  {选择器} selector2 [description] jQuery对象 下一级渲染区域的ul
 * @param5  {function} fn [description]  渲染下一级区域的函数
 * @return {[type]}
 */
function renderDomainList (selector1,obj,addIdName,selector2,fn) {
    var list = [];
    // 遍历数据源，组装html标签
    $.each(obj, function(i, I) {
        if(I['status']==="AVAILABLE"){
            list.push('<li data-id=' + I.id + '><span class="zoneName">' + I.zoneName + '</span><a class="status available pull-right">可用</a></li>');
        }
        if(I['status']==="FORBID"){
            list.push('<li data-id=' + I.id + '><span class="zoneName">' + I.zoneName + '</span><a class="status forbidden pull-right">禁用</a></li>');
        }
    });
    // 无论数据是否为空,都在列表的最后增加"点击添加按钮"
    list.push('<li class="add" id='+addIdName+'>点击添加+</li>');
    // 初始化列表内的数据展示面板前先清空原列表内的数据内容，再重新加载渲染
    selector1.html("");
    selector1.html(list.join(""));
    //当前列表渲染变化后，子级数据列表也全部清空
    var nextSiblingsAll=selector1.parent().nextAll().find("ul");
    nextSiblingsAll.html("");
    //列表内的数据是否大于15项。如果大于15项，则添加类名"scrollBar"出现滚动条，少于15项则显示正常
    var selector1Lis=selector1.children();
    selector1Lis.length>15?selector1.addClass('scrollBar'):nextSiblingsAll.removeClass('scrollBar');
    //点击列表内的每一项数据，运用事件委托的方式获取元素触发事件
    selector1.off("click").on("click","li",function () {
        //判断，如果当前点击的目标元素不是添加按钮区域，触发以下事件
        if(!$(this).hasClass('add')){
            //为选中的列表项添加选中样式'selected'
            $(this).addClass('selected').siblings().removeClass('selected');
            //获取当前列表项的索引。根据该索引对应数据源的索引，通过数据源的索引匹配子级目录数据，渲染子级列表页面
            var selectedIndex=$(this).index();
            if (!!obj.length) {
                !!fn && $.isFunction(fn) && fn(selector2,obj[selectedIndex]['subZone']);
            } else {
                !!fn && $.isFunction(fn) && fn(selector2,[]);
            }
        }
    });
}


